TypeScript Generics: Làm chủ các kiểu dữ liệu phức tạp cho ứng dụng mạnh mẽ

TypeScript, một tập hợp cha của JavaScript, trao quyền cho các nhà phát triển viết mã mạnh mẽ và dễ bảo trì hơn thông qua việc định kiểu tĩnh. Một trong những tính năng mạnh mẽ nhất của nó là generics, cho phép bạn viết mã có thể hoạt động với nhiều loại dữ liệu khác nhau mà vẫn duy trì được sự an toàn về kiểu. Hướng dẫn này cung cấp một khám phá toàn diện về TypeScript generics, tập trung vào ứng dụng của chúng đối với các kiểu dữ liệu phức tạp trong bối cảnh phát triển phần mềm toàn cầu.

Generics là gì?

Generics cung cấp một cách để viết mã có thể tái sử dụng và hoạt động với các kiểu khác nhau. Thay vì viết các hàm hoặc lớp riêng biệt cho mỗi kiểu bạn muốn hỗ trợ, bạn có thể viết một hàm hoặc lớp duy nhất sử dụng các tham số kiểu. Các tham số kiểu này là trình giữ chỗ cho các kiểu thực tế sẽ được sử dụng khi hàm hoặc lớp được gọi hoặc khởi tạo. Điều này đặc biệt hữu ích khi xử lý các cấu trúc dữ liệu phức tạp nơi kiểu dữ liệu bên trong các cấu trúc đó có thể thay đổi.

Lợi ích của việc sử dụng Generics

• Tái sử dụng mã: Viết mã một lần và sử dụng nó với các kiểu khác nhau. Điều này làm giảm sự trùng lặp mã và giúp codebase của bạn dễ bảo trì hơn.
• An toàn kiểu: Generics cho phép trình biên dịch TypeScript thực thi an toàn kiểu tại thời điểm biên dịch. Điều này giúp ngăn ngừa lỗi runtime liên quan đến việc không khớp kiểu.
• Cải thiện khả năng đọc: Generics làm cho mã của bạn dễ đọc hơn bằng cách chỉ rõ các kiểu mà các hàm và lớp của bạn được thiết kế để hoạt động.
• Tăng cường hiệu suất: Trong một số trường hợp, generics có thể dẫn đến cải thiện hiệu suất vì trình biên dịch có thể tối ưu hóa mã được tạo ra dựa trên các kiểu cụ thể đang được sử dụng.

Cú pháp cơ bản của Generics

Cú pháp cơ bản của generics bao gồm việc sử dụng dấu ngoặc nhọn (< >) để khai báo các tham số kiểu. Các tham số kiểu này thường được đặt tên là T, K, V, v.v., nhưng bạn có thể sử dụng bất kỳ định danh hợp lệ nào. Dưới đây là một ví dụ đơn giản về một hàm generic:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // Đầu ra: hello
console.log(myNumber); // Đầu ra: 123
console.log(myBoolean); // Đầu ra: true

Trong ví dụ này, <T> khai báo một tham số kiểu có tên là T. Hàm identity nhận một đối số kiểu T và trả về một giá trị kiểu T. Khi gọi hàm, bạn có thể chỉ định rõ ràng tham số kiểu (ví dụ: identity<string>) hoặc để TypeScript tự suy luận dựa trên kiểu của đối số.

Làm việc với các kiểu dữ liệu phức tạp

Generics trở nên đặc biệt có giá trị khi xử lý các kiểu dữ liệu phức tạp như mảng, đối tượng và interface. Hãy cùng khám phá một số kịch bản phổ biến:

Mảng Generic

Bạn có thể sử dụng generics để tạo các hàm hoặc lớp hoạt động với các mảng có kiểu khác nhau:

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // Đầu ra: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // Đầu ra: apple, banana, cherry

Ở đây, hàm arrayToString nhận một mảng kiểu T[] và trả về một chuỗi đại diện cho mảng đó. Hàm này hoạt động với các mảng thuộc bất kỳ kiểu nào, làm cho nó có khả năng tái sử dụng cao.

Đối tượng Generic

Generics cũng có thể được sử dụng để định nghĩa các hàm hoặc lớp hoạt động với các đối tượng có hình dạng khác nhau:

interface Person {
  name: string;
  age: number;
  country: string; // Thêm quốc gia cho bối cảnh toàn cầu
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // Thêm tiền tệ cho bối cảnh toàn cầu
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // Đầu ra: Name: Alice
displayInfo(product); // Đầu ra: Name: Laptop

Trong ví dụ này, hàm displayInfo nhận một đối tượng kiểu T phải có thuộc tính name kiểu chuỗi. Mệnh đề extends { name: string } là một ràng buộc, chỉ định các yêu cầu tối thiểu cho tham số kiểu T. Điều này đảm bảo rằng hàm có thể truy cập thuộc tính name một cách an toàn.

Cách sử dụng Generic nâng cao

TypeScript generics cung cấp các tính năng nâng cao hơn cho phép bạn tạo ra mã linh hoạt và mạnh mẽ hơn nữa. Hãy cùng khám phá một số tính năng này:

Nhiều tham số kiểu

Bạn có thể định nghĩa các hàm hoặc lớp với nhiều tham số kiểu:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // Đầu ra: Bob
console.log(merged.age); // Đầu ra: 42

Hàm merge nhận hai đối tượng kiểu T và U và trả về một đối tượng mới chứa các thuộc tính của cả hai đối tượng. Đây là một cách mạnh mẽ để kết hợp dữ liệu từ các nguồn khác nhau.

Ràng buộc Generic

Như đã trình bày trước đó, ràng buộc cho phép bạn giới hạn các kiểu có thể được sử dụng với một tham số kiểu generic. Điều này đảm bảo rằng mã generic có thể hoạt động an toàn trên các kiểu được chỉ định.

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // Đầu ra: 3
loggingIdentity("hello"); // Đầu ra: 5
// loggingIdentity(123); // Lỗi: Đối số kiểu 'number' không thể gán cho tham số kiểu 'Lengthwise'.

Hàm loggingIdentity nhận một đối số kiểu T phải có thuộc tính length kiểu số. Điều này đảm bảo rằng hàm có thể truy cập thuộc tính length một cách an toàn.

Lớp Generic

Generics cũng có thể được sử dụng với các lớp:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // Đầu ra: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // Đầu ra: [ 2 ]

Lớp DataStorage có thể lưu trữ dữ liệu thuộc bất kỳ kiểu T nào. Điều này cho phép bạn tạo ra các cấu trúc dữ liệu có thể tái sử dụng và an toàn về kiểu.

Interface Generic

Interface generic rất hữu ích để định nghĩa các hợp đồng có thể hoạt động với các kiểu khác nhau. Ví dụ:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

Interface Result định nghĩa một cấu trúc generic để biểu diễn kết quả của một hoạt động. Nó có thể chứa dữ liệu kiểu T hoặc một lỗi kiểu E. Đây là một mẫu phổ biến để xử lý các hoạt động bất đồng bộ hoặc các hoạt động có thể thất bại.

Các kiểu tiện ích và Generics

TypeScript cung cấp một số kiểu tiện ích tích hợp hoạt động tốt với generics. Những kiểu tiện ích này có thể giúp bạn biến đổi và thao tác các kiểu một cách mạnh mẽ.

Partial<T>

Partial<T> làm cho tất cả các thuộc tính của kiểu T trở thành tùy chọn (optional):

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // Hợp lệ

Readonly<T>

Readonly<T> làm cho tất cả các thuộc tính của kiểu T chỉ đọc (readonly):

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // Lỗi: Không thể gán cho 'age' vì nó là một thuộc tính chỉ đọc.

Pick<T, K>

Pick<T, K> chọn một tập hợp các thuộc tính K từ kiểu T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> loại bỏ một tập hợp các thuộc tính K từ kiểu T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> tạo một kiểu với các khóa K và các giá trị kiểu T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // Danh sách mở rộng cho bối cảnh toàn cầu
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // Danh sách mở rộng cho bối cảnh toàn cầu

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Kiểu ánh xạ (Mapped Types)

Kiểu ánh xạ cho phép bạn biến đổi các kiểu hiện có bằng cách lặp qua các thuộc tính của chúng. Đây là một cách mạnh mẽ để tạo ra các kiểu mới dựa trên các kiểu đã có. Ví dụ, bạn có thể tạo một kiểu làm cho tất cả các thuộc tính của một kiểu khác trở thành chỉ đọc:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // Lỗi: Không thể gán cho 'age' vì nó là một thuộc tính chỉ đọc.

Trong ví dụ này, [K in keyof Person] lặp qua tất cả các khóa của interface Person, và Person[K] truy cập kiểu của mỗi thuộc tính. Từ khóa readonly làm cho mỗi thuộc tính trở thành chỉ đọc.

Kiểu điều kiện (Conditional Types)

Kiểu điều kiện cho phép bạn định nghĩa các kiểu dựa trên các điều kiện. Đây là một cách mạnh mẽ để tạo ra các kiểu thích ứng với các kịch bản khác nhau.

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // Xử lý cả null và undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // Đầu ra: HELLO

  const invalidValue = getValue(null); // Dòng này sẽ gây ra lỗi
  console.log(invalidValue); // Dòng này sẽ không được thực thi
} catch (error: any) {
  console.error(error.message); // Đầu ra: Value cannot be null or undefined
}

Trong ví dụ này, kiểu NonNullable<T> kiểm tra xem T có phải là null hoặc undefined không. Nếu có, nó trả về never, có nghĩa là kiểu đó không được phép. Ngược lại, nó trả về T. Điều này cho phép bạn tạo ra các kiểu được đảm bảo không phải là null.

Các phương pháp tốt nhất khi sử dụng Generics

Dưới đây là một số phương pháp tốt nhất cần ghi nhớ khi sử dụng generics:

• Sử dụng tên tham số kiểu có tính mô tả: Chọn những cái tên chỉ rõ mục đích của tham số kiểu.
• Sử dụng ràng buộc để giới hạn các kiểu có thể được sử dụng với một tham số kiểu generic: Điều này đảm bảo rằng mã generic của bạn có thể hoạt động an toàn trên các kiểu được chỉ định.
• Giữ cho mã generic của bạn đơn giản và tập trung: Tránh làm phức tạp hóa mã generic của bạn với quá nhiều tham số kiểu hoặc các ràng buộc phức tạp.
• Ghi tài liệu cho mã generic của bạn một cách kỹ lưỡng: Giải thích mục đích của các tham số kiểu và bất kỳ ràng buộc nào được sử dụng.
• Cân nhắc sự đánh đổi giữa khả năng tái sử dụng mã và an toàn kiểu: Mặc dù generics có thể cải thiện khả năng tái sử dụng mã, chúng cũng có thể làm cho mã của bạn trở nên phức tạp hơn. Hãy cân nhắc lợi ích và nhược điểm trước khi sử dụng generics.
• Cân nhắc đến việc địa phương hóa và toàn cầu hóa (l10n và g11n): Khi xử lý dữ liệu cần hiển thị cho người dùng ở các khu vực khác nhau, hãy đảm bảo generics của bạn hỗ trợ định dạng và các quy ước văn hóa phù hợp. Ví dụ, định dạng số và ngày tháng có thể khác nhau đáng kể giữa các địa phương.

Ví dụ trong bối cảnh toàn cầu

Hãy xem xét một số ví dụ về cách generics có thể được sử dụng trong bối cảnh toàn cầu:

Chuyển đổi tiền tệ

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // Đầu ra: 100 USD is equal to 85 EUR

Định dạng ngày tháng

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("Ngày ở Mỹ: " + formatDate(currentDate, usDateFormat));
console.log("Ngày ở Đức: " + formatDate(currentDate, germanDateFormat));
console.log("Ngày ở Nhật: " + formatDate(currentDate, japaneseDateFormat));

Dịch vụ dịch thuật

interface Translation {
  [key: string]: string; // Cho phép các khóa ngôn ngữ động
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Không tìm thấy bản dịch cho ${key} trong ngôn ngữ ${languageCode}.`;
  }
  return lang.translations[key] || `Không tìm thấy bản dịch cho ${key}.`;
}

console.log(translate("hello", "en", languageData)); // Đầu ra: Hello
console.log(translate("hello", "es", languageData)); // Đầu ra: Hola
console.log(translate("welcome", "fr", languageData)); // Đầu ra: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // Đầu ra: Không tìm thấy bản dịch cho missingKey trong ngôn ngữ de.

Kết luận

TypeScript generics là một công cụ mạnh mẽ để viết mã có thể tái sử dụng, an toàn về kiểu và có thể hoạt động với các kiểu dữ liệu phức tạp. Bằng cách hiểu cú pháp cơ bản, các tính năng nâng cao và các phương pháp tốt nhất của generics, bạn có thể cải thiện đáng kể chất lượng và khả năng bảo trì của các ứng dụng TypeScript của mình. Khi phát triển các ứng dụng cho đối tượng người dùng toàn cầu, generics có thể giúp bạn xử lý các định dạng dữ liệu và quy ước văn hóa đa dạng, đảm bảo trải nghiệm người dùng liền mạch cho mọi người.